import { useEffect } from 'react';
import Advantages from '../../Home/Advantages';
import Brands from '../../Home/Brands';
import Promotions from '../../Home/Promotions';
import CatItemContent from './CatItemContent';
import CatItemSidebar from './CatItemSidebar';
import { useLocation, useParams } from 'react-router-dom';
import { scrollToTop } from '../../../helpers/scrollToTop/scrollToTop';

const CatItem = () => {
  const { state } = useLocation();
  const { params } = useParams();
  console.log(params)

  useEffect(() => {
    scrollToTop();
  }, []);

  return (
    <div className='content lining-nums proportional-nums'>
      <h3 className='font-semibold text-4xl text-colBlack pb-5'>
        {state?.catalog?.name}
      </h3>
      <div className='flex pb-5 min-h-[420px]'>
        <CatItemSidebar state={state} />
        <CatItemContent state={state} />
      </div>
      <Promotions />
      <Brands />
      <Advantages />
    </div>
  );
};

export default CatItem;
